import React, { Component, PropTypes } from 'react'
import financeAuditService from "containers/financial-management/new-finance-audit/finance-audit.service";
import InvoiceList from 'containers/financial-management/invoice-bag-approve/invoice-bag-approve-detail/invoice-list'
import {messages} from "share/common";

class SlideExpenseReportDetailExpenseCalendar extends Component {

  static contextTypes = {
    info: PropTypes.object,
    jobInfo: PropTypes.object,
    invoiceEnabled: PropTypes.bool,
    isWaitForAudit: PropTypes.bool,
    isAuditEditable: PropTypes.bool,
    auditCapability: PropTypes.bool,
    readOnly: PropTypes.bool
  };

  state = {
    invoiceList: {
      withReceipt: [],
      freeReceipt: [],
      financeReceipts: []
    },
    invoiceLoading: false
  };

  componentDidMount() {
    this.getInvoiceList();
  }

  getInvoiceList = () => {
    const { info } = this.context;
    this.setState({  invoiceLoading: true });
    financeAuditService.getExpenseReportInvoices(info.expenseReportOID).then(res => {
      res.data.financeReceipts.forEach(this.mapFinanceInvoice);
      this.setState({ invoiceList: res.data, invoiceLoading: false });
    })
  };

  mapFinanceInvoice = invoice => {
    invoice.isFinance = true;
    return invoice;
  };

  render() {
    const { invoiceList, invoiceLoading } = this.state;
    const { info, jobInfo, isWaitForAudit, isAuditEditable, readOnly } = this.context;
    const { selectedInvoice, refreshInfo, expenseReportInvoices, goBack, onSelectInvoice, showOCRFlag } = this.props;
    return (
      <div className='slide-expense-report-detail-expense-calendar'>
        <InvoiceList
          readOnly={readOnly}
          baseInfo={Object.assign({}, info, { userOID: info.applicantOID })}
          jobInfo={jobInfo}
          showOCRFlag={showOCRFlag}
          invoiceList={invoiceList}
          invoiceLoading={invoiceLoading}
          isWaitForAudit={isWaitForAudit}
          isAuditEditable={isAuditEditable}
          onRefreshInvoice={this.getInvoiceList}
          selectedRowKeys={selectedInvoice.map(item => `${item.id}_${item.invoiceOID}`)}
          expenseReportInvoices={expenseReportInvoices}
          refreshInfo={refreshInfo}
          onRef={ref => this.receiptDetailRef = ref}
          goBack={goBack}
          onRowSelectionChange={onSelectInvoice}
        />
      </div>
    )
  }

}

export default SlideExpenseReportDetailExpenseCalendar;
